<template>
  <div class="home">
    Hello, {{userInfoStore.name}}
    <chart-top :chartData="chartData"></chart-top>
    <chart-middle :x="chartData.orderFullYearAxis"  :saleArr="chartData.orderFullYear" :visiteArr="chartData.userFullYear" :arr="chartData.orderRank"
    :arr1="chartData.userRank"></chart-middle>
    <chart-footer></chart-footer>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Home',
}
</script>
<script lang="ts" setup>
  //引入请求函数
import {reqChartsData} from '@/api/home/home'
import {ref,onMounted} from 'vue'
//引入子组件
import ChartTop from './chartTop/index.vue'
import ChartMiddle from './chartMiddle/index.vue'
import ChartFooter from './chartFooter/index.vue'
//获取userInfo这个仓库
import { useUserInfoStore } from '@/stores/userInfo';
const userInfoStore = useUserInfoStore();

//在挂载阶段获取数据
let chartData = ref<any>({})
onMounted(async()=>{
  let result = await reqChartsData();
  //存储数据
  chartData.value = result;
})
</script>

<style scoped>
  .home {
    width: 100%;
    height: 100%;
    padding: 20px;
    font-size: 30px;
  }
</style>
